@import "base.scss";
@import "mixin.scss";

.SY-setContent {
    padding-bottom: 10 * $fontSize12;
}

//SY-playingBox
.SY-playingBox {
    width: 100%;
    height: 60 * $fontSize10;
    background: url("../img/personalCenter/squareBg.png") no-repeat center;
    background-size: cover;
    .wrap {
        padding:2 * $fontSize12 0;
        .loading {
            width: 100%;
            height: 55 * $fontSize10 + 2;
            line-height: 55 * $fontSize10 + 2;
            font-size: $fontSize18;
            color: $colorab;
            background: rgba(50,50,50,.88);
        }
    }
    .SY-playing {
        width: 49.1 * $fontSize20;
        height: 27.6 * $fontSize20;
        background: rgba(50,50,50,.88);
        .SY-player {
            width: 100%;
            height: 100%;
        }
        .SY-banner {
            &:hover {
                .checkDetail {
                    display: block;
                }
            }
            @extend .SY-player;
            .bannerList {
                @extend .SY-player;
            }
            .banner {
                @extend .SY-player;
                display: block;
                top: 0;
                left: 0;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            .checkDetail {
                display: none;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%,-50%));
                z-index: 99;
                .btn {
                    color: $colorfff;
                    font-size: $fontSize18;
                    width: 19 * $fontSize10;
                    height: 4 * $fontSize12;
                    line-height: 4 * $fontSize12;
                    @include border(2px,solid,$colorfff);
                    background: rgba(255,255,255,.05);
                    &:hover {
                        background: rgba(255,255,255,.4);
                    }
                }
            }
        }
        .play-mainBox {
            &:hover{
                .checkDetail {
                    display: block;
                }
            }
            @extend .SY-player;
            .play-cover {
                @extend .SY-player;
                background-repeat: no-repeat;
                background-position: center;;
                background-size: cover;
            }
            .checkDetail {
                display: none;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%,-50%));
                z-index: 99;
                .btn {
                    color: $colorfff;
                    font-size: $fontSize18;
                    width: 19 * $fontSize10;
                    height: 4 * $fontSize12;
                    line-height: 4 * $fontSize12;
                    @include border(2px,solid,$colorfff);
                    background: rgba(255,255,255,.05);
                    &:hover {
                        background: rgba(255,255,255,.4);
                    }
                }
            }
            .livingSoon {
                top: 36%;
                left: 50%;
                @include transform(translate(-50%,-50%));
                z-index: 99;
                .tips {
                    font-size: $fontSize22;
                    line-height: $lineHeight;
                    color: $colorfff;
                }
                span {
                    font-weight: 700;
                    margin:0 $fontSize12 / 3;
                    color: #ff0808;
                }
            }
        }
        .coverLayer {
            top: 0;
            left: 0;
            @extend .SY-player;
            background: rgba(0,0,0,.1);
        }
        .play-controlBar {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4 * $fontSize10 + 6;
            z-index: 99;
            .play-controlBg {
                width: 100%;
                height: 100%;
                background: #323232;
            }
            .play-controlBtns {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            .left-controlBtns {
                margin-left: $fontSize10;
            }
            .right-controlBtns {
                margin-right: $fontSize16 / 2;
            }
            .control-btn {
                margin:($fontSize10 + 3) $fontSize10;
                background-image: url("../img/icons/squarePlayBtn.png");
                background-repeat: no-repeat;
                cursor: pointer;
            }
            .playBtn{
                width: $fontSize18 - 1;
                height: $fontSize20 + 1;
                @include link-backPos((-$fontSize22 0),(-$fontSize22 (-($fontSize22 + 4))));
            }
            .pauseBtn {
                width: $fontSize18 - 1;
                height: $fontSize20 + 1;
                @include link-backPos((0 0),(0 (-(2 * $fontSize12 + 1))));
            }
            .renewBtn {
                width: 2 * $fontSize12;
                height: $fontSize20;
                @include link-backPos((-(4 * $fontSize10 + 3) 0),(-(4 * $fontSize10 + 3) (-($fontSize20 + 5))));
            }
            .voiceOpenBtn {
                width: $fontSize20 - 1;
                height: $fontSize16;
                margin-top: $fontSize14 + 1;
                @include link-backPos((-(14 * $fontSize10) (-$fontSize12 / 4)),(-(14 * $fontSize10 (-(3 * $fontSize10 - 3)))));
            }
            .voiceCloseBtn {
                width: $fontSize20;
                height: $fontSize16;
                margin-top: $fontSize14 + 1;
                @include link-backPos((-(7.25 * $fontSize16) (-($fontSize10 / 5))),(-(7.25 * $fontSize16) (-(2 * $fontSize14))));
            }
            .volumeBtn {
                width: 10 * $fontSize10 + 4;
                height: $fontSize10;
                margin:$fontSize18 $fontSize12 / 2 0;
            }
            .volumeBg {
                width: 100%;
                height: 100%;
                @include borderRadius(10px);
                background: #1c1c1c;
            }
            .volumeProgress {
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                @include borderRadius(10px 0 0 10px);
                cursor: pointer;
                background: $theme;
                z-index: 5;
            }
            .volumeBall {
                top: -($fontSize10 / 10);
                right: -($fontSize12 / 2);
                width: $fontSize12;
                height: $fontSize12;
                background: $colorfff;
                z-index: 99;
            }
            .innerBall {
                display: block;
                top: $fontSize12 / 4;
                left: $fontSize12 / 4;
                width: $fontSize12 / 2;
                height: $fontSize12 / 2;
                background: $theme;
            }
            .playRate {
                &:hover{
                    .playRateMenu {
                        display: block;
                    }
                }
                text-align: center;
                font-size: $fontSize12;
                color: $colorfff;
                margin:0 $fontSize12 / 3 0 $fontSize14;
                padding-top: $fontSize12 + 1;
                cursor: pointer;
                .rateNow {
                    width: 4 * $fontSize14;
                    height: $fontSize22;
                    line-height: $fontSize22;
                    color: $theme;
                    @include borderRadius(2px);
                    background: #1c1c1c;
                }
                .playRateMenu {
                    display: none;
                    bottom: 3 * $fontSize10;
                    left: 0;
                    width: 4 * $fontSize14;
                    padding:$fontSize10 / 2 0;
                    @include borderRadius(2px);
                    background: rgba(28,28,28,.7);
                    .rateItem {
                        padding: $fontSize10 / 2 0;
                        line-height: $lineHeight - 0.1;
                        &:hover {
                            background: rgba(255,255,255,.1);
                        }
                        &.active {
                            color: $theme;
                        }
                    }
                    .trigon {
                        bottom: -($fontSize12 / 2);
                        left: $fontSize22;
                        width: 0;
                        height: 0;
                        border-left: $fontSize12 / 2 solid transparent;
                        border-right: $fontSize12 / 2 solid transparent;
                        border-top: $fontSize12 / 2 solid rgba(28,28,28,.7);
                    }
                }
            }
            .fullScreen {
                width: $fontSize16 + 1;
                height: $fontSize16 + 1;
                margin-top: $fontSize14 + 1;
                @include link-backPos((-(6 * $fontSize12) (- $fontSize12 / 6)),(-(6 * $fontSize12) (-(3 * $fontSize10 - 3))));
            }
            .normalScreen {
                width: $fontSize16 + 1;
                height: $fontSize16 + 1;
                margin-top: $fontSize14 + 1;
                @include link-backPos((-(6 * $fontSize16 - 1) (- $fontSize10 / 5)),(-(6 * $fontSize16 - 1) (-(3 * $fontSize10 - 3))));
            }
            .checkDetail {
                margin:$fontSize12 $fontSize12 / 2;
                font-size: $fontSize12;
                @include borderRadius(2px);
                overflow: hidden;
                .btn {
                    color: $colorfff;
                    padding:$fontSize10 / 2 $fontSize10;
                    @include link-posColor($theme,$darkTheme);
                }
                i {
                    font-size: $fontSize14;
                    margin-left: $fontSize12 / 3;
                }
            }
        }
    }
    .SY-playList {
        width: 20 * $fontSize10 + 8;
        height: 34.5 * $fontSize16;
        background: rgba(50,50,50,.88);
        .item {
            width: 18 * $fontSize10 - 1;
            height: 8 * $fontSize10 - 1;
            margin:$fontSize10 + 1 auto 0;
            &.active {
                .item-txt {
                    background: url("../img/icons/border.png") no-repeat center;
                }
                .item-title{
                    display: block !important;
                }
            }
            &:hover {
                .cover {
                    background: rgba(0,0,0,.3);
                }
                .item-txt {
                    background: url("../img/icons/border.png") no-repeat center;
                }
                .item-title{
                    display: block !important;
                }
            }
            a {
                width: 18 * $fontSize10 - 1;;
                height: 100%;
            }
            .item-pic {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            .cover {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.4);
                z-index: 9;
            }
            .item-txt {
                width: 15.5 * $fontSize12;
                height: 8 * $fontSize10 + 3;
                top: -($fontSize10 / 5);
                left: -($fontSize10 - 3);
                z-index: 9;
                .item-title {
                    display: none;
                    top: $fontSize10 / 5;
                    right: $fontSize10 / 5;
                    max-width: 10 * $fontSize10;
                    height: $fontSize20;
                    line-height: $fontSize20 - 1;
                    padding:0 $fontSize12 / 2;
                    font-size: $fontSize12;
                    color: $colorfff;
                    background: rgba(0,0,0,.6);
                    @include borderRadius(0 5px 0 5px);
                }
            }
            &.sy-video .playIcon,&.sy-living .livingIcon,&.sy-liveSoon .livingIcon {
                display: none;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%,-50%));
                color: $colorea;
                z-index: 19;
            }
            &.sy-video{
                &:hover {
                    .playIcon {
                        display: block;
                    }
                }
            }
            &.sy-living,&.sy-liveSoon{
                &:hover {
                    .livingIcon {
                        display: block;
                    }
                }
            }
            &.sy-video .playIcon {
                font-size: 3 * $fontSize10;
            }
            &.sy-living .livingIcon,&.sy-liveSoon .livingIcon {
                width: 90%;
                font-size: $fontSize14;
                .text {
                    margin-left: $fontSize10 - 3;
                    line-height: $lineHeight - 0.2;
                }
            }
            &.sy-living .livingIcon .icon {
                width: 2 * $fontSize12 + 1;
                height: $fontSize20;
                margin: 0 auto $fontSize12 / 4;
                background: url("../img/icons/signal.gif") no-repeat center;
                background-size: 100%;
            }
            &.sy-liveSoon .text span {
                font-weight: 700;
                color: #ff0808;
            }
        }
    }
}

//SY-recommendWork
.SY-recommendWork {
    margin-top: $fontSize20;
    background: $colorfff;
    .mainNav {
        padding:$fontSize22 $fontSize14 0;
        margin-bottom: $fontSize20;
        .title {
            font-size: $fontSize18;
        }
        .exchangeBtn {
            font-size: $fontSize16;
            &:hover {
                color: $color333;
            }
            i {
                margin-left: $fontSize12 / 2;
            }
        }
    }
    .recommendBox {
        padding:0 $fontSize14 $fontSize10;
        .loading {
            height: 49 * $fontSize10 + 6;
            line-height: 49 * $fontSize10 + 6;
            font-size: $fontSize18;
            color: $colorab;
        }
        .item {
            padding:$fontSize12 / 2 $fontSize12 / 2 $fontSize12;
            margin:0 $fontSize16 / 2 $fontSize16 / 2 0;
            width: 27 * $fontSize10 + 3;
            @include border(1px,solid,#e5e5e5);
            &:nth-child(4n) {
                margin-right: 0;
            }
            &:hover {
                .item-pic {
                    @include transform(scale(1.02));
                }
            }
            .item-pic {
                width: 27 * $fontSize10 + 3;
                height: 15 * $fontSize10 + 3;
                overflow: hidden;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                &:hover {
                    .cover {
                        background: rgba(0,0,0,.2);
                    }
                }
            }
            .cover {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.4);
                z-index: 5;
            }
            .item-msg {
                padding:$fontSize10 / 2 $fontSize16 / 2 0;
                .workName {
                    font-size: $fontSize16;
                    height: 2 * $fontSize12;
                    line-height: $lineHeight;
                    max-width: 21 * $fontSize10;
                    @include link-colors($color333,$color000);
                }
                .mark {
                    font-size: $fontSize12;
                    margin-top: $fontSize12 / 2;
                    &.pay {
                        color: #ee5353;
                    }
                    &.free {
                        color: #2fac6f;
                    }
                }
                .details {
                    margin-top: $fontSize10 / 2;
                }
                .avatar {
                    width:$fontSize18;
                    height: $fontSize18;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .nickName {
                    font-size: $fontSize12;
                    vertical-align: top;
                    max-width: 7 * $fontSize10;
                    margin:$fontSize12 / 3 0 0 $fontSize12 / 2;
                    @include link-colors(#5b5b5b,$color333);
                }
                .society {
                    margin-top: $fontSize12 / 2;
                    p {
                        font-size: $fontSize12;
                        margin-left: $fontSize12 / 3;
                        color: $colorab;
                    }
                    i {
                        font-size: $fontSize14;
                        margin-right: $fontSize12 / 4;
                    }
                }
            }
            &.re-video {
                .playIcon {
                    top: 50%;
                    left: 50%;
                    width: 90%;
                    text-align: center;
                    @include transform(translate(-50%,-50%));
                    font-size: 3 * $fontSize10;
                    color: $colorea;
                    z-index: 19;
                }
            }
            &.re-living {
                .livingTips {
                    top: 50%;
                    left: 50%;
                    width: 90%;
                    text-align: center;
                    @include transform(translate(-50%,-50%));
                    font-size: $fontSize14;
                    color: $colorea;
                    z-index: 19;
                    .text {
                        line-height: $lineHeight;
                    }
                    span {
                        font-weight: 700;
                        color: #ff0808;
                    }
                    .icon {
                        width: 3 * $fontSize10;
                        height: 2 * $fontSize12 + 1;
                        margin:0 auto $fontSize12 / 4;
                        background: url("../img/icons/signal.gif") no-repeat center;
                        background-size: 100%;
                    }
                }
            }
        }
    }
}

//SY-recommendAlbum
.SY-recommendAlbum {
    margin-top: $fontSize20;
    background: $colorfff;
    .mainNav {
        padding:$fontSize22 $fontSize14 0;
        margin-bottom: $fontSize20;
        .title {
            font-size: $fontSize18;
        }
    }
    .albumBox {
        padding: 0 $fontSize14 $fontSize10;
        .loading {
            height: 34 * $fontSize10 + 4;
            line-height: 34 * $fontSize10 + 4;
            font-size: $fontSize16;
            color: $colorab;
        }
        .item {
            width: 17.75 * $fontSize16;
            height: 16 * $fontSize10;
            margin: 0 $fontSize12 $fontSize12 0;
            &:hover {
                .cover {
                    background: rgba(0,0,0,.2);
                }
                .item-pic {
                    @include transform(scale(1.05));
                }
            }
            &:nth-child(4n) {
                margin-right: 0;
            }
            a {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        }
        .item-pic {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .cover {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
            z-index: 5;
        }
        .item-msg {
            bottom: $fontSize16 / 2;
            left: 0;
            width: 100%;
            color: $colorfff;
            z-index: 9;
        }
        .albumName {
            padding:0 $fontSize12;
            margin-bottom: $fontSize12 / 2;
            font-size: $fontSize14;
            line-height: $lineHeight;
        }
        .user-detail {
            margin-left: $fontSize12;
        }
        .avatar {
            width: 3 * $fontSize10 - 2;
            height: 3 * $fontSize10 - 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .nickName {
            font-size: $fontSize12;
            max-width: 7 * $fontSize10;
            vertical-align: top;
            margin:$fontSize12 / 2 0 0 $fontSize12 / 2;
        }
        .society {
            margin:$fontSize12 / 2 $fontSize12 0 0;
            p {
                font-size: $fontSize12;
                margin-left: $fontSize12 / 3;
            }
            i {
                font-size: $fontSize14;
                margin-right: $fontSize12 / 4;
            }
        }
    }
}

//SY-recommendAuthor
.SY-recommendAuthor {
    margin-top: $fontSize20;
    background: $colorfff;
    .mainNav {
        padding:$fontSize22 $fontSize14 0;
        margin-bottom: $fontSize20;
        .title {
            font-size: $fontSize18;
        }
        .exchangeBtn {
            font-size: $fontSize16;
            &:hover {
                color: $color333;
            }
            i {
                margin-left: $fontSize12 / 2;
            }
        }
    }
    .authorBox {
        padding: 0 $fontSize14 3 * $fontSize10;
        .loading {
            height: 38 * $fontSize10 + 4;
            line-height: 38 * $fontSize10 + 4;
            font-size: $fontSize16;
            color: $colorab;
        }
        .item {
            width: 18.25 * $fontSize16;
            height: 24 * $fontSize16;
            font-weight: 200;
            @include borderRadius(12px);
            &:hover {
                @include boxShadow(0 0 4.5 * $fontSize12 rgba(0,0,0,.15));
            }
            a {
                width: 100%;
                height: 35 * $fontSize10 + 4;
                padding-top: 3 * $fontSize10;
            }
        }
        .line {
            &:after {
                display: inline-block;
                position: relative;
                top: -(30 * $fontSize10);
                width: 0;
                height: 26 * $fontSize10 + 3;
                margin:0;
                content: '';
                border-right: 1px solid $colore5;
            }
        }
        .avatar {
            margin:0 auto;
            width: 12 * $fontSize10 + 2;
            height: 12 * $fontSize10 + 2;
            @include border(2px,solid,#dedede);
            img {
                width: 12 * $fontSize10 - 2;
                height: 12 * $fontSize10 - 2;
                @include border(2px,solid,$colorfff);
            }
        }
        .nickName {
            font-size: $fontSize18;
            font-weight: 700;
            color: $color333;
            line-height: $lineHeight;
            margin:$fontSize16 / 2 auto $fontSize12 / 3;
            max-width: 26 * $fontSize10;
        }
        .subhead {
            font-size: $fontSize12;
            color: #848484;
            line-height: $lineHeight;
            margin:0 auto $fontSize12 / 2;
            max-width: 26 * $fontSize10;
        }
        .datas {
            p {
                width: 25%;
                font-size: $fontSize14;
                color:$color666;
                line-height: $lineHeight;
                .num {
                    font-weight: 700;
                    color: $color333;
                    margin-left: $fontSize12 / 4;
                }
            }
        }
        .description {
            font-size: $fontSize14;
            line-height: $lineHeight - 0.1;
            color: $color333;
            width: 10 * $fontSize22;
            margin:$fontSize10 auto 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:6;
            overflow: hidden;
        }
    }
}
